<script>
import DefaultHeader from '@/portal4.1/pc/component/header/DefaultHeader.vue'
import DefaultContent from '@/portal4.1/pc/component/content/DefaultContent.vue'
import DefaultAffix from '@/portal4.1/pc/component/affix/DefaultAffix.vue'
import DefaultFooter from '@/portal4.1/pc/component/footer/DefaultFooter.vue'
import { getToken } from '@/utils/auth'
import { guestLayout, userLayout } from '@/api/portal/user/layout'
import { getInfo } from '@/api/login'
import { layout } from '@/mixins/layout'
export default {
  name: 'PcDefaultIndex',
  components: { DefaultHeader, DefaultContent, DefaultAffix, DefaultFooter },
  mixins: [layout],
  computed: {
    ContentBack() {
      return { background: 'url(' + this.layoutTheme.image + ') repeat', backgroundSize: '100%' }
    }
  },
  mounted() {
    // 查询布局
    this.initLayout()
    // 设置用户基本信息
    this.initUser()
  },
  methods: {
    initUser() {
      if (getToken()) {
        getInfo().then(res => {
          this.$store.commit('SET_USER', res.user)
        }).catch(() => {

        })
      }
    },
    // 查询布局信息
    initLayout() {
      if (getToken()) {
        userLayout().then(res => {
          const { data } = res
          this.$store.commit('SET_LAYOUT', data)
        })
      } else {
        guestLayout().then(res => {
          const { data } = res
          this.$store.commit('SET_LAYOUT', data)
        })
      }
    }
  }
}
</script>
<template>
  <div :style="{ fontSize: layoutTheme.fontSize, color: layoutTheme.color }">
    <!--  页头部分  -->
    <div class="custom-layout-header">
      <default-header />
    </div>
    <!--  内容部分   -->
    <div class="custom-layout-content">
      <default-content />
    </div>
    <!--  页脚部分内容  -->
    <div class="custom-layout-footer">
      <default-footer />
    </div>
    <!-- 固定显示项 -->
    <div class="custom-layout-affix" :style="{ backgroundColor: layoutTheme.backgroundColor}">
      <default-affix />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.custom-layout-header {
  height: 300px;
  width: 100%;
}
.custom-layout-content {
  width: 100%;
  min-height: calc(100vh - 240px);
}
.custom-layout-affix {
  width: 66px;
  position: fixed;
  top: 250px;
  right: 8px;
  z-index: 1;
  min-height: 66px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.custom-layout-footer {
  width: 100%;
  height: 120px;
}
</style>
